<html>
<head>
    <title>4-绘制文本</title>
    <style type="text/css">
        /* 方式1： */

        /* @font-face {
            font-family: "DINGTALK";
            src: url("./font/DINGTALK_SANS.TTF");
        }

        @font-face {
            font-family: "douyu";
            src: url("./font/douyuFont-2.otf");
        } */

        .text-p {
            font-family: 'douyu';
            background: linear-gradient(0deg, #54CCDF, #DAFAFF 60%);
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>

<!-- 
canvas: 使用自定义的字体方式
1.css 引入
2.FontFace方式加载，并用 document.fonts.add(xxx)

todo ???  字体格式以及区别 
-->
<canvas id="tutorial" width="500" height="500"></canvas>
<p class="text-p">排放口专题</p>
</body>
<script type="text/javascript">
    function draw() {
        let canvas = document.getElementById('tutorial');
        // 检测支持性
        if (!canvas.getContext) return;
        //获得 2d 上下文对象
        let ctx = canvas.getContext("2d");

        // 开始代码

        ctx.font = "30px sans-serif";
        ctx.textAlign = "left";
        ctx.textBaseline = "ideographic";
        ctx.direction = "ltl";
        ctx.letterSpacing = "3px";
        ctx.fillText("天天开心", 10, 100);

        // const fontFile = new FontFace(
        //     "Inconsolata",
        //     'url(https://fonts.gstatic.com/s/inconsolata/v31/QlddNThLqRwH-OJ1UHjlKENVzlm-WkL3GZQmAwPyya15.woff2) format("woff2")',
        //     { stretch: "50% 200%" },
        // );

        /** 方式2 ***/

        // 大数字字体
        const DINGTALKFontFile = new FontFace(
            "DINGTALK",
            'url(./font/DINGTALK_SANS.TTF)',
            {
                stretch: "50% 200%",
                style: "normal",
                weight: "400"
            },
        );
        DINGTALKFontFile.load().then(() => {
            document.fonts.add(DINGTALKFontFile);
            ctx.font = '20px DINGTALK'
            ctx.fillText("12345678", 10, 200)
        });

        // 文本字体
        const douyuFontFile = new FontFace(
            "douyu",
            'url(./font/douyuFont-2.otf)',
            {
                stretch: "100% 100%",
                style: "normal",
                weight: "400"
            },
        );
        douyuFontFile.load().then(() => {
            document.fonts.add(douyuFontFile);
            ctx.font = '20px douyu'
            ctx.fillText("排放口专题", 10, 300)
        });
    }
    draw();
</script>

</html>